<template>
    <view class="box">
        <view class="pd20">
            <view v-if="loading">
                <van-skeleton title :row="3" :loading="true"></van-skeleton>
            </view>
            <view v-else>
                <view v-if="dataResult">
                    <view class="fs44 fwb">{{ dataResult.title }}</view>
                    <!-- 顶部 -->
                    <view class="flex aic c9 jcsb mgt20">
                        <view class="flex aic fs24">
                            <view class="nav">
                                <image :src="giveAvatar(dataResult)" mode=""></image>
                            </view>
                            <view>
                                <view class="c0 nameLimit fs32">
                                    {{ giveName(dataResult) }}
                                </view>
                                <view class="flex fs18">
                                    <uni-dateformat :date="dataResult.publish_date"
                                        format="yyyy年MM月dd hh :mm:ss"></uni-dateformat>
                                    ·
                                    <view>发布于 {{ dataResult.province }}</view>
                                </view>
                            </view>
                        </view>
                    </view>
                    <!-- 内容区 -->
                    <!-- <view class="mgt40">{{ data.content }}</view> -->
                    <uv-parse :content="dataResult.content" :tag-style="tagStyle"></uv-parse>
                </view>
                <!-- 点赞 -->
                <view class="zanBox" @click="ckLike">
                    <view class="zan" :class="dataResult.islike?'active':''">
                        <text class="iconfont icon-icon-test50"></text>
                        <view class="cf fs32" v-if="dataResult.islike">{{ dataResult.like_count }}</view>
                    </view>
                </view>
                <view class="flex column aic mgt40">
                    <view class="nav">
                        <!-- <image src="../../static/images/user-default.jpg" mode=""></image> -->
                        <view v-for="i in imgList">
                            <image :src="giveAvatar(i)" mode="aspectFill"></image>
                        </view>
                    </view>
                    <view class="fs28 mgt20">
                        <text class="cblue">{{ dataResult.view_count }}</text>人看过
                    </view>
                </view>


            </view>
        </view>
        <view class="comment">
            <view style="padding-bottom:50rpx" v-if="!commentList.list.length">
                <van-empty image-size="100" description="评论为空"
                    image="https://cdn.uviewui.com/uview/empty/comment.png" />
            </view>

            <view class="content" v-else>
                <view class="item" v-for="i in commentList.list">
                    <comment-item :item="i" @plDel="plDel"></comment-item>
                </view>
            </view>
            <comment-frame :commentObj="commentObj" @toParant="toParant"></comment-frame>
        </view>
    </view>
</template>

<script setup>
    import {
        onMounted,
        reactive,
        ref,
        useAttrs
    } from 'vue';
    import {
        giveName,
        giveAvatar,
        likeFun
    } from '../../uitls/tools.js'
    import {
        store
    } from '@/uni_modules/uni-id-pages/common/store.js';
    import pageJson from '@/pages.json';
    const artId = useAttrs().id;
    const tagStyle = {
        p: "line-height:1.7em;font-size:16px;text-indent: 2em;panding-bottom:10rpx",
        img: "margin: 10rpx 0;display:flex; justify-content: center;"
    }
    // 获取数据
    const db = uniCloud.database()
    let loading = ref(true);
    let dataResult = ref();

    function getData() {
        let artTemp = db.collection('fyquanzi_art').where(`_id=="${artId}"`).getTemp();
        let userTemp = db.collection('uni-id-users').field("_id,username,nickname,avatar_file").getTemp();
        let likeTemp = db.collection("quanzi_like").where(`article_id=="${artId}" && user_id==$cloudEnv_uid`).getTemp();
        let arrList = [artTemp, userTemp];
        if (store.hasLogin) arrList.push(likeTemp);
        db.collection(...arrList).get({
            getOne: true
        }).then(res => {
            if (!res.result.data) {
                errfunc();
                return;
            }
            res.result.data.islike = false;
            if (store.hasLogin) {
                res.result.data.islike = res.result.data._id.quanzi_like.length ? true : false;
            }

            dataResult.value = res.result.data;
            loading.value = false;
        }).catch(err => {
            errfunc();
        });

    }
    //err处理
    function errfunc() {
        uni.showToast({
            title: '参数有误',
            icon: "none"
        });
        setTimeout(() => {
            uni.reLaunch({
                url: '/pages/index/index'
            })
        }, 800);
    }
    //修改阅读量
    const utils = uniCloud.importObject('utiltsObj', {
        customUI: true
    });

    function readUpdate() {
        utils.opration('fyquanzi_art', 'view_count', artId, 1)
    }
    //点赞
    let like_timer = 0;

    function ckLike() {
        if (!store.hasLogin) {
            uni.showModal({
                title: "是否确认登陆",
                success: res => {
                    uni.navigateTo({
                        url: "/" + pageJson.uniIdRouter.loginPage
                    })
                }
            })
            return;
        }
        let timer = Date.now();
        if (timer - like_timer < 2000) {
            uni.showToast({
                title: '点击过于频繁',
                icon: "none"
            });
            return;
        }
        like_timer = timer;
        dataResult.value.islike ? dataResult.value.like_count-- : dataResult.value.like_count++;
        dataResult.value.islike = !dataResult.value.islike;
        likeFun(artId);
    }

    //获取点赞用户头像
    let imgList = []

    function getzanImg() {
        // artId
        let artTemp = db.collection('quanzi_like').where(`article_id == "${artId}"`).getTemp();
        let zanTemp = db.collection('uni-id-users').field('_id,avatar_file').getTemp();
        db.collection(artTemp, zanTemp).orderBy('publish_date desc').limit(4).get().then(res => {
            imgList = res.result.data;
        });
    }
    //评论
    const commentObj = reactive({
        article_id: artId,
        comment_type: 0
    })
    const commentList = reactive({
        list: []
    });
    //获取评论
    function getcoment() {
        let cmentTemp = db.collection('quanzi_comment').where(`article_id=="${artId}" && comment_type == 0`).orderBy(
                "comment_date desc")
            .getTemp();
        let userTemp = db.collection('uni-id-users').field('_id,username,nickname,avatar_file').getTemp();
        db.collection(cmentTemp, userTemp).limit(5).get().then(res => {
            commentList.list = res.result.data;
        })
    }
    //评论回调
    function toParant(e) {
        commentList.list.unshift({
            ...e,
            user_id: [store.userInfo]
        })
    }
    //删除评论回调
    function plDel(e) {
        let index = commentList.list.findIndex(fine => {
            return fine._id == e;
        });
        commentList.list.splice(index, 1)
    }
    onMounted(() => {

        if (!artId) {
            errfunc();
            return;
        }

        getData();
        getzanImg();
        readUpdate();
        getcoment();
    })
</script>

<style lang="scss" scoped>
    .box {
        height: calc(100vh - var(--window-top));

    }

    .nav {
        display: flex;
        justify-content: center;
        padding: 30rpx 0;

        image {
            width: 50rpx;
            height: 50rpx;
            border-radius: 50%;
            border: 3px solid #fff;
            margin-left: -20rpx;

        }
    }

    .nameLimit {
        max-width: 320rpx;
        text-overflow: ellipsis;
        overflow: hidden;
        word-break: break-all;
        white-space: nowrap;
    }

    .contentLimit {
        word-break: break-all;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .zanBox {
        display: flex;
        justify-content: center;
        align-items: center;

        .zan {
            margin-top: 40rpx;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 15rpx 75rpx;
            border-radius: 50rpx;
            background-color: #e4e4e4;



            .iconfont {
                color: #fff;
                font-size: 45rpx;
            }

        }

    }

    .active {
        background-color: #019fe0 !important;
    }

    .cblue {
        color: #019fe0;
    }

    .comment {
        padding: 30rpx;
        padding-bottom: 120rpx;

        .item {
            padding: 10rpx 0;
        }
    }
</style>